<template>
    <div class="title">
        <image @click="back" :src="backUrl" class="back"></image>
        <text class="text">{{title}}</text>
        <image @click="info" :src="infoUrl" class="info"></image>
    </div>
</template>
<script>
import {
  getBaseImageUrl,
  pop,
  alert,
  weexAlert,
  testConfig
} from "../utils/config.js";
export default {
  props: {
    title: {
      type: String,
      default: weex.config.bundleUrl
    }
  },
  data: function() {
    return {};
  },
  methods: {
    back: function() {
      let self = this;
      self.$emit("back");
      pop();
    },
    info: function() {
      weexAlert(weex.config.env);
    }
  },
  computed: {
    backUrl: function(imageName) {
      return getBaseImageUrl() + "back.png";
    },
    infoUrl: function() {
      return getBaseImageUrl() + "info.png";
    }
  }
};
</script>
<style scoped>
.title {
  width: 750px;
  height: 85px;
  margin-bottom: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(162, 217, 192);
}
.text {
  font-size: 32px;
  text-align: center;
  color: #41b883;
  font-weight: bold;
}
.back {
  width: 75px;
  height: 60px;
  margin: 10px;
}
.info {
  width: 60px;
  height: 60px;
  margin: 10px;
}
</style>
